Configuration d'App Inventor

Version textuelle

    

L'installation requiert un compte Gmail. Si vous n'en n'avez pas, revenez à la leçon précédente avant de continuer.

Note liminaire :

  • Si vous suivez ce cours à titre individuel ou à distance depuis chez vous :
    Vous pouvez vous limiter à la procédure d'installation rapide (en mode Wifi). Vous devez disposer d'un accès internet et un réseau Wifi local (box) auquel connecter votre smartphone ou votre tablette.
    Téléchargez l'application "AI2 companion" sur votre smartphone depuis le playstore.
    (Il n'y a rien à installer sur votre PC).

  • Si vous êtes enseignant et/ou si vous avez la responsabilité de fournir les PC et le réseau :
    Le réseau de votre établissement sera souvent configuré avec des règles de sécurité trop strictes pour la configuration simple ou rapide d'App Inventor: vous n'aurez peut-être pas de Wifi ou l'accès au réseau par les tablettes ou smartphones ne sera peut-être pas autorisé. Même si c'est le cas, l'échange entre smartphone et PC sera peut-être verrouillé.
    Il faut alors connecter les tablettes ou smartphones par câble USB ce qui nécessite l'installation de "AIstarter.exe" sur tous les PC. Il faut les droits pour le faire et ça peut soulever des difficultés (même si la source du logiciel est très fiable).
    Donc suivez les indications ci-dessous si vous avez les droits pour installer un logiciel, ou contactez le responsable des PC plusieurs semaines ou mois à l'avance (ce qui ne vous empêche pas de préparer le contenu par ailleurs).
Donc Attention, ça peut prendre 5 mn chez vous et 3 mois avec un réseau public. Prévoyez à l'avance! Il existe des solutions palliatives. Partagez votre expérience ou vos difficultés en envoyant un commentaire.

App Inventor est un exemple d' Environnement de Développement Intégré (IDE). Ca veut dire qu'il intègre tous les logiciels nécessaires pour concevoir, développer et tester une application nomade sur Android. Les IDEs font partie de la "boite à outils" standard des programmeurs.

App Inventor est une application "cloud" (i.e. qui s'exécute principalement sur le réseau). La partie qui tourne sur votre ordinateur est "entièrement" à l'intérieur de votre navigateur Internet (browser). Chrome, Firefox ou Safari sont les navigateurs recommandés. Vérifiez que vous avez une version assez récente de votre navigateur préféré parmi les trois cités.

Configuration rapide

Cette vidéo décrit comment configurer rapidement votre ordinateur et votre mobile et comment importer des applications enregistrées sur internet ou votre PC. Cette configuration ne fonctionne que si le PC et le smartphone sont sur le même réseau Wifi et sont autorisés à communiquer entre eux sur ce réseau.

Configuration complète

Le guide d'installation décrit quatre options (complémentaires) pour développer des applications avec App Inventor. Pour l'installation, si vous maîtrisez l'anglais il est préférable d'utiliser le site App Inventor du MIT. Une version française est proposée (sans garantie de mise à jour) sur ce site avec les liens suivants correspoondant aux différentes options d'installation :

L'installation de la configuration qui permet des développements interactifs avec une connexion USB est décrite ici. NOus vous recommandons de faire cette installation, même si vous ne le faites pas au début. Cette configuration vous sera très utile en cas de défaillance du réseau principal.


En milieu scolaire, nous vous recommandons d'installer trois options : Wifi, USB et un émulateur.

Pour suivre ce cours dans de bonnes conditions, il est préférable d'avoir une tablette ou un téléphone Android (mais pas forcément tout le temps, on peut partager). Certaines leçons ne fonctionneront pas complètement avec l'émulateur. Mais il y'a des cas où l'émulateur est bien pratique.

Après avoir terminé l'installation, vous pouvez utiliser l'application test ci-dessous pour vérifier que tout fonctionne correctement.

Tester votre installation

Suivez les instructions ci-dessous pour créer une application de test et vérifiez que votre tablette (ou smartphone) est bien configurée en Wifi, avec le logiciel "App Inventor Companion".
Si c'est le cas, vous pourrez scanner avec votre téléphone ou votre tablette, le barcode affiché à l'écran de l'ordinateur avec "l'App Inventor Companion" de votre appareil et l'application s'ouvrira sur votre tablette (ou portable).
  1. Télécharger TestApp.aia, le projet de test d'AppInventor en vous rappelant à quel endroit le fichier est enregistré sur votre ordinateur (souvent le répertoire " Téléchargements" de votre bureau).

    *NOTE: Le fichier qui contient un projet App Inventor est une archive zip mais avec le suffixe .aia, qui signifie App Inventor Archive .*

  2. Ouvrir App Inventor 2. Cliquez sur "continue", si une fenêtre "Welcome to App Inventor" s'affiche en popup.

    *NOTE: Il est parfois nécessaire de remonter vers le haut de la fenêtre en utilisant l'ascenceur à droite, pour faire apparaitre les commandes qui sont en haut de la fenêtre.*

  3. Choisir la langue :
    Le choix de la langue se fait en haut à droite de l'écran, immédiatement à gauche du login.
    Ici, vous pouvez choisir le français ou rester en anglais. Vous pouvez également lancer App Inventor directement en français en l'indiquant avec "?locale=fr_FR" en paramètre de l'adresse internet (vous pouvez créer un racourci) :
    http://ai2.appinventor.mit.edu/?locale=fr_FR

    Note sur le choix de la langue :

    Ce cours est en français, y compris les programmes des premiers chapitres. La langue par défaut d'App inventor est l'anglais, donc n'oubliez pas de démarrer en français ou de passer au français à chaque démarrage (cf. ci-dessus).
    L'utilisation du français évite les difficultés de vocabulaire pour l'accès initial, mais ce choix a aussi des inconvénients. Le passage d'une langue à une autre - en cours de route - génère des erreurs (principalement sur le nom des paramètres dans les blocs de procédures). Le choix du français limite la portabilité, dont le partage des applications sur la "Galerie" d'App Inventor.
    Nous vous conseillons de passer à l'anglais lorsque la signification des blocs ne présentera plus de difficulté. L'anglais est alors adapté au partage et correspond à la documentation en ligne. N'oubliez pas non plus de mentionner que votre application est en français si vous la partagez.
    Les vidéos en anglais que pour lesquelles nous n'avons pas trouvé d'équivalent en français ont été sous-titrées (ou le seront).

  4. Cliquez sur l'onglet "Projets" ou "Projects".

  5. Sélectionnez Importer le Projet (.aia) de mon ordinateur.

  6. Naviguez dans les répertoires et sélectionnez le projet TestApp.aia que vous venez de télécharger.

Quand le projet s'ouvre, la partie Designer de App Inventor est affichée.

Le Designer est l'endroit où vous concevez l'interface utilisateur de votre application. Dans l'exemple ci-dessus, l'application contient une image (pour l'instant affichée en icône), deux labels pour afficher un texte, et un composant Player avec lequel on va jouer les sons.

Maintenant, basculons vers l'affichage de l'éditeur de blocs en cliquant en haut à droite sur le bouton "blocs".

L'éditeur de blocs est l'endroit où on va coder. Remarquez que les blocs d'App Inventor se raccordent entre eux comme des pièces de puzzle. Les blocs de cette application vont afficher un message de félicitations à l'écran et jouer un son.

Ca y'est vous êtes sur votre chemin de programmeur !
Dans la prochaine leçon, vous apprendrez comment naviguer entre les différentes vues (designer et éditeur de blocs), à quoi sert chacune d'elles, comment on fait le design d'une appli et comment on la programme.

Exécuter une application sur votre tablette via Wifi

Pour l'instant, notre objectif est uniquement de vérifier que l'installation et la configuration sont correctes. Pour le vérifier, suivez les instructions suivantes :

  1. Vérifiez que votre ordinateur et votre tablette ou votre téléphone sont connectés au même réseau Wifi, puis démarrez l'appli " MIT AI2 Companion app" sur votre tablette ou téléphone.

  2. Dans la barre en haut de l'application App Inventor, sur votre ordinateur cliquez "Connecte" puis sélectionnez Compagnon AI. Une fenêtre apparaitra avec un flash code et un code de 6 lettres en clair. (Note: Le code de 6-lettres sera différent à chaque fois. Celui illustré ci-dessous ne marchera pas.)

  3. Sur votre appareil (tablette ou téléphone) lancez l'application AI2 companion, puis
    • scannez le flash code en appuyant sur le bouton "scan QR code",
    • ou tapez le code de 6 lettres et cliquez sur le bouton “Connect with code”.

Exécuter une application sur votre tablette via une connexion USB

Pour le guide d'installation, rendez-vous ici et suivez les étapes 1 à 6.

Exécuter une application avec l'émulateur

si vous utilisez un émulateur, les étapes sont les suivantes:

  1. Dans App Inventor (sur votre ordinateur), cliquez "Connecte" puis sélectionnez Emulateur.

  2. Ceci connectera automatiquement l'application à l'émulateur. Il n'y a pas besoin de scanner le flashcode, ni d'entrer le code de 6 caracères. La connection se fera automatiquement.

Dépanner

Si la configuration est correcte, vous devriez voir l'application test fonctionner sur votre appareil (téléphone ou tablette) ou sur l'émulateur. Vous devriez voir un message et une image d'Android. Vous devriez aussi entendre un tonnerre d'applaudissements.

Si l'appli ne fonctionne pas correctement, vous devrez probablement vérifier les étapes de l'installation pour vérifier que vous avez bien réalisé toutes les étapes. Si malgré tout vous n'y arrivez pas, consultez le forum et postez une question si nécessaire.
*NOTE : Pour les écoles, consultez l'administrateur réseau. La configuration ne marche pas si les tablettes ne peuvent pas se raccorder au réseau Wifi et (sauf erreur) si le dialogue entre postes du réseau n'est pas autorisé. En cas de blocage, la connection via USB est une solution de secours. C'est également souvent le cas des réseaux d'hôtels, scolaires ou publics.*